<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaffff;
				/* 背景图属性 */
				background-image: url(img/小新.png);
				/* 背景图大于空间--背景图尺寸属性：属性值：①px % 
				                                        ②contain等比例放大图片 
														cover等比例放大图片
				*/
				background-size: 30% 30%;
				/* 背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/* 背景定位属性：改变图像再背景中的位置  >背景图小于空间
				               属性值：X% Y%  数值px 数值px 英文
				 */
				background-position: 80% 0%;
				background-position: 100px 0;
				background-position: center center;
			}
			/* 背景图像固定属性：fixed固定模式-->理解:水印 
			先决条件：1.高度空间足够形成滚动条
			         2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
					                      ②等比例缩放图片，保证图片全部显示在容器中
					3.背景图固定属性：background-attachment:fixed 固定到页面上
			*/
			body{
				/* 高度100000px 形成滚动条*/
				height: 100000px;
				/* 滚动模式-->背景图如何滚动--属性background-size */
				background-size: contain;
				/* 引入图 */
				background-image: url(img/小新.png);
				background-repeat: no-repeat;
				/* 水印效果：背景图固定 */
				background-attachment: fixed;
				/* background背景属性： 背景图片 背景重复 背景定位 背景尺寸 背景固定;
				常用写法：backgruond:背景图片 背景重复；
				*/
			}
		</style>
	</head>
	<body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quisquam perspiciatis accusantium distinctio nesciunt, odit tempore debitis, pariatur esse commodi asperiores voluptatibus facilis doloremque obcaecati impedit fugit natus explicabo. Quia.
		<div></div>
	</body>
</html>